<template>
  <el-menu
    class="aside-menu"
    text-color="#fff"
    active-text-color="#F56C6C"
    background-color="#545c64"
    :default-active="active"
    :router="true"
  >
    <template v-for="item in menus">
      <el-submenu
        v-if="item.children && item.children.length > 0"
        :index="item.path"
        :key="item.path"
      >
        <template slot="title">
          <i
            :class="item.meta && item.meta.icon"
            v-if="item.meta && item.meta.icon"
          ></i>
          <span>{{ item.meta && item.meta.title }}</span>
        </template>

        <el-menu-item
          v-for="child in item.children"
          :key="child.path"
          :index="child.path"
        >
          <i
            :class="child.meta && child.meta.icon"
            v-if="child.meta && child.meta.icon"
          ></i>
          <span slot="title">{{ child.meta && child.meta.title }}</span>
        </el-menu-item>
      </el-submenu>

      <el-menu-item v-else :index="item.path" :key="item.path">
        <i
          :class="item.meta && item.meta.icon"
          v-if="item.meta && item.meta.icon"
        ></i>
        <span slot="title">{{ item.meta && item.meta.title }}</span>
      </el-menu-item>
    </template>

    <!-- <el-submenu index="/system">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统模块</span>
            </template>

            <el-menu-item index="/system/user">用户模块</el-menu-item>
            <el-menu-item index="/system/role">角色模块</el-menu-item>
          </el-submenu>

          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-menu-item index="/about">
            <i class="el-icon-document"></i>
            <span slot="title">关于页面</span>
          </el-menu-item>

          <el-menu-item index="/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">设置页面</span>
          </el-menu-item> -->
  </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {
      // active: "/",
      menus: [
        {
          path: "/system",
          meta: { title: "系统模块", icon: "el-icon-location" },
          children: [
            {
              path: "/system/user",
              meta: { title: "系统用户", icon: "el-icon-menu" },
            },
            { path: "/system/role", meta: { title: "系统角色" } },
          ],
        },
        {
          path: "/",
          meta: { title: "首页", icon: "el-icon-menu" },
          children: [],
        },
        {
          path: "/about",
          meta: { title: "关于页面", icon: "el-icon-document" },
        },
        { path: "/icon", meta: { title: "图标" } },
        { path: "/buttonandlink", meta: { title: "按钮和文字链接" } },
        { path: "/radioandcheckbox", meta: { title: "单选框和多选框" } },
        { path: "/input", meta: { title: "输入框" } },
        { path: "/select", meta: { title: "选择器" } },
        {
          path: "/datepicker",
          meta: { title: "日期选择器" },
        },
        { path: "/form", meta: { title: "表单" } },
        { path: "/table", meta: { title: "表格" } },
        { path: "/pagination", meta: { title: "分页" } },
        { path: "/message", meta: { title: "消息提示" } },
        { path: "/messageBox", meta: { title: "弹框" } },
        { path: "/navmenu", meta: { title: "导航菜单" } },
        { path: "/tabs", meta: { title: "标签页" } },
        {
          path: "/dialog",
          meta: { title: "对话框" },
        },
        { path: "/card", meta: { title: "卡片" } },
        {
          path: "/carousel",
          meta: { title: "走马灯" },
        },
        {
          path: "/image",
          meta: { title: "图片" },
        },
        {
          path: "/drawer",
          meta: { title: "抽屉" },
        },
      ],
    };
  },
  // watch: {
  //   $route: function (newVal) {
  //     // console.log("当前的页面", newVal)
  //     const { path } = newVal;
  //     this.active = path;
  //   },
  // },
  computed: {
    active() {
      const { path = "/" } = this.$route;

      return path;
    },
  },
};
</script>

